<!-- 积分排行 -->
<template>
  <div class="context_box_f tabbarBottom">
    <div class="points_title">积分排行榜</div>
    <div class="points_warp_top sbFlex" v-if="myRank.username || myRank.avatarUrl">
      <div class="points_warp_l cenFlex">
        <div class="points_warp_l_head img cenFlex">
          <img :src="myRank.avatarUrl" alt />
        </div>
        <div class="points_warp_l_phone">
          <div>{{myRank.username}}</div>
          <div class="self_number">第{{transformFn(myRank.rowNo)}}名</div>
        </div>
      </div>
      <div class="points_warp_r">{{myRank.score}}分</div>
    </div>
    <div class="points_warp sbFlex" v-for="(item, i) in rankList" :key="i">
      <div class="points_warp_l cenFlex">
        <div class="points_warp_l_number cenFlex" v-if="i > 2">{{ i + 1 }}</div>
        <div class="points_warp_l_number_img img cenFlex" v-else>
          <img :src="ranknumberImg[i]" alt />
        </div>
        <div class="points_warp_l_head img cenFlex">
          <img :src="item.avatarUrl" alt />
        </div>
        <div class="points_warp_l_phone">{{hidePhoneFn(item.phone)}}</div>
      </div>
      <div class="points_warp_r" :style="{ animationDelay: i * 0.1 + 's' }">
        {{item.pastScore}}分
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/rank";
import { hidePhone,convertNum } from "@/utils/index.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ranknumberImg: [
        require("@/assets/img/index_icon5.png"),
        require("@/assets/img/index_icon6.png"),
        require("@/assets/img/index_icon7.png"),
      ],
      myRank: {},
      rankList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getInit() {
      api.indexScore().then((res) => {
        if (res.code == 0) {
          let { list, myRank } = res.data;
          this.myRank = myRank;
          this.rankList = list;
        }
      });
    },
    hidePhoneFn(phone){
      return hidePhone(phone)
    },
    transformFn(val){
      return convertNum(val)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInit();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.points_title {
  font-size: 16px;
  font-family: STHeitiSC-Light, STHeitiSC;
  font-weight: 300;
  color: #000000;
  padding: 20px 20px;
}

.points_warp,
.points_warp_top {
  padding: 13px 20px;
  background: #fff;
  margin-bottom: 5px;
  .points_warp_l {
    .points_warp_l_head {
      margin-right: 10px;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
    }
    .points_warp_l_number {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      background: rgba(216, 216, 216, 0.35);
    }
    .points_warp_l_number_img {
      width: 30px;
      margin-right: 10px;
    }
  }
  .points_warp_r {
    color: $niceblue;
    opacity: 0;
    animation: leftAnmation 0.3s linear forwards;
  }
}
@keyframes leftAnmation {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}
.points_warp_top {
  margin-bottom: 20px;
  .self_number {
    color: #8b8d8b;
    margin-top: 5px;
    font-size: 12px;
  }
}
</style>